<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>基础JAVAscript</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
	</head>

	<BODY>
		<pre>
			<h1>JAVAscript练习</a></h1>
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=137947039&site=qq&menu=yes" class="right"><img border="0" src="http://wpa.qq.com/pa?p=2:137947039:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
		</pre>
		<div id="div1" class="box box-re">
			1、变量的类型<br><br>
			<button type="button" class="btn btn-info">number</button> <button type="button" class="btn btn-info">string</button> <button type="button" class="btn btn-info">boolean</button> <button type="button" class="btn btn-info">function</button> <button type="button" class="btn btn-info">object</button> <button type="button" class="btn btn-info">undefined</button>
			<div id="div1-1" class="box box-re text-info">变量类型例子展示</div>
		</div>
		<div id="div2" class="box box-re">
			2、变量类型转换 <span class="text-danger">显式类型转换/强制类型转换（明确写出parseFloat或paseInt告诉计算机必须转换。）</span><br><br> 输入两个数字，点求和弹出两个数字相加的结果。
			<div class="box box-re form-inline">
				例1：输入框的默认value进行相加，结果是进行了字符串相加，而非数字相加。<br>
				<input type="text" class="form-control">+<input type="text" class="form-control"> <button type="button" class="btn btn-info">求和</button>
			</div>
			<div class="box box-re form-inline">
				例2：将value的值进行parseInt，之后再相加，就是数字相加的结果了。<br> 如果输入12+abc，结果会显示NaN，任何数和NaN相加结果都是NaN。NaN和NaN是不相等的。
				<br>
				<input type="text" class="form-control">+<input type="text" class="form-control"><button type="button" class="btn btn-info">求和</button>
			</div>
			<div class="box box-re form-inline">
				例3：isNaN，检测输入框的内容是不是NaN。true为真，false为假。<br>
				<input type="text" class="form-control"> <button type="button" class="btn btn-info">检测</button>
			</div>
			<div class="box box-re form-inline">
				例4：检测输入的内容是不是NaN，如果是，则给出提示。如果不是，就给出运算结果，<span class="text-warning">仅支持数字整数相加</span>。<br>
				<input type="text" class="form-control" placeholder="支持整数运算">+<input type="text" class="form-control" placeholder="支持整数运算"> <button type="button" class="btn btn-info">求和</button>
			</div>
			<div class="box box-re form-inline">
				例5：检测输入的内容是不是NaN，如果是，则给出提示。如果不是，就给出运算结果，<span class="text-warning">支持小数相加</span>。<br>
				<input type="text" class="form-control" placeholder="支持小数运算">+<input type="text" class="form-control" placeholder="支持小数运算"> <button type="button" class="btn btn-info">求和</button>
			</div>
		</div>
		<div id="div3" class="box box-re">
			3、变量类型转换 <span class="text-danger">隐式类型转化（没有写出转换语句，计算机自己进行字符串转换成数字。）</span><br><br>
			<div class="box box-re">
				例1：两个自定义变量进行相等对比，弹出运算结果。
				<input type="text" class="form-control" placeholder="var a='5'（数字5）" readonly /> = <input type="text" class="form-control" placeholder="var b=5（变量5）" readonly /><br><button type="button" class="btn btn-info">==结果</button> <button type="button" class="btn btn-info">===结果</button><br> ==结果：先转换类型，然后比较。计算机自动先把变量5转换成了数字5，然后再进行了比较。这样才会出现true的提示。
				<br> ===结果：不转换类型，直接比。这样才会出现false的提示。
			</div>
			<div class="box box-re">
				例2：两个自定义变量进行相加和相减，弹出运算结果。
				<input type="text" class="form-control" placeholder="var a='15'（数字15）" readonly /> = <input type="text" class="form-control" placeholder="var a='5'（数字5）" readonly /><br><button type="button" class="btn btn-info">+结果</button> <button type="button" class="btn btn-info">-结果</button><br> +结果：+号在计算机里有两种功能。1、字符串链接。2、数字相加。运算时计算机采取了字符串链接的方法给出了结果，所以是155。
				<br> -结果：-号在计算机只有一种功能。就是数字相减。所以计算机算出了结果为10。
			</div>
		</div>
		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>JAVAscript的组成：</b>1、ECMAscript-解释器，人类语言转换成0和1。2、DOM，Document(文档，HTML) Object（对象） Model（模型）。3、BOM，Browser（浏览器）Object Model。</p>
			<p><b>变量的类型</b>告诉计算机有这个函数，但不会被执行，实际执行的是函数中的代码。</p>
			<p><b>parseInt：</b>作用于字符串转换成数字，不支持小数。从左到右去扫描字符串，一旦发现不是数字了即停止扫描，保留已发现的数字。</p>
			<p><b>parseFloat：</b>作用于字符串转换成数字，支持小数。</p>
			<p><b>NaN：</b>全称是Not a Number（非数字）。</p>
			<p><b>isNaN</b>作用于检测是否为NaN。</p>
		</div>
		<script>
		//变量类型
			(function(){


				var div1 = document.getElementById('div1');
				var btn_group = div1.getElementsByTagName('button');
				var show = document.createElement('pre');
				var div1_1 = document.getElementById('div1-1');
				div1_1.appendChild(show);	

				//可用let变量
				for ( var i = 0; i < btn_group.length; i++){
					var f = function (num){
						btn_group[num].addEventListener('click', function (){
						console.log(this.childNodes[0].nodeValue);
						switch(true){
							case this.childNodes[0].nodeValue == 'number':{
								show.innerHTML = 'var num = 1';
								break;
							}
							case this.childNodes[0].nodeValue == 'string':{
								show.innerHTML = 'var str = "string"';
								break;
							}
							case this.childNodes[0].nodeValue == 'boolean':{
								show.innerHTML = 'var b = true';
								break;
							}
							case this.childNodes[0].nodeValue == 'function':{
								show.innerHTML = 'function name (){}';
								break;
							}
							case this.childNodes[0].nodeValue == 'object':{
								show.innerHTML = 'obj = {};';
								break;
							}
							case this.childNodes[0].nodeValue == 'undefined':{
								show.innerHTML = 'var u = undefined'
								break;
							}
						}
					});
				}(i);
			}


			})();


			//变量类型转换 显式类型转换/强制类型转换

			//例1
			(function (){
				var div2 = document.getElementById('div2');
				var div_goal = div2.getElementsByTagName('div')[0];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];
				var add_Btn = div_goal.getElementsByTagName('button')[0];
				add_Btn.addEventListener('click',function () {
					alert(input_1.value + input_2.value);
				});
			})();

			//例2
			(function(){
				var div2 = document.getElementById('div2');
				var div_goal = div2.getElementsByTagName('div')[1];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];
				var add_Btn = div_goal.getElementsByTagName('button')[0];
				var input_1_val;
				var input_2_val;
				add_Btn.addEventListener('click',function () {
					input_1_val = parseInt(input_1.value);
					input_2_val	= parseInt(input_2.value);
					if ( isNaN(input_1.value) == false && isNaN(input_2.value) == false){
						alert(input_1_val + input_2_val);
					}
				});
			})();

			//例3
			(function (){
				var div2 = document.getElementById('div2');
				var div_goal = div2.getElementsByTagName('div')[2];
				var input = div_goal.getElementsByTagName('input')[0];
				var add_Btn = div_goal.getElementsByTagName('button')[0];			
				add_Btn.addEventListener('click',function (){
					if ( isNaN(input.value) == true){
						alert('不是数字');
					}else{
						alert('数字');
					}
				});
			})();


			//例4
			(function(){
				var div2 = document.getElementById('div2');
				var div_goal = div2.getElementsByTagName('div')[3];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];
				var add_Btn = div_goal.getElementsByTagName('button')[0];
				var input_1_val;
				var input_2_val;
				add_Btn.addEventListener('click',function () {
					input_1_val = parseInt(input_1.value);
					input_2_val	= parseInt(input_2.value);
					if ( isNaN(input_1.value) == false && isNaN(input_2.value) == false){
						alert(input_1_val + input_2_val);
					}else{
						alert('不是数字不能运算');
					}
				});
			})();

			//例4
			(function(){
				var div2 = document.getElementById('div2');
				var div_goal = div2.getElementsByTagName('div')[4];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];
				var add_Btn = div_goal.getElementsByTagName('button')[0];
				var input_1_val;
				var input_2_val;
				add_Btn.addEventListener('click',function () {
					input_1_val = parseFloat(input_1.value);
					input_2_val	= parseFloat(input_2.value);
					if ( isNaN(input_1.value) == false && isNaN(input_2.value) == false){
						alert(input_1_val + input_2_val);
					}else{
						alert('不是数字不能运算');
					}
				});
			})();


			//变量类型转换 隐式类型转化


			//例1
			(function (){
				var div3 = document.getElementById('div3');
				var div_goal = div3.getElementsByTagName('div')[0];
				var equal_Btn = div_goal.getElementsByTagName('button')[0];
				var equalComplete_Btn = div_goal.getElementsByTagName('button')[1];
						
				equal_Btn.addEventListener('click',function (){
					var a = '5';
					var b = 5;
					alert( a == b );
				});

				equalComplete_Btn.addEventListener('click',function (){
					var a = '5';
					var b = 5;
					alert( a === b );
				});
			})();

			//例2
			(function (){
				var div3 = document.getElementById('div3');
				var div_goal = div3.getElementsByTagName('div')[1];
				var add_Btn = div_goal.getElementsByTagName('button')[0];
				var reduce_Btn = div_goal.getElementsByTagName('button')[1];

				add_Btn.addEventListener('click', function (){
					var a = '15';
					var b = '5';
					alert(a + b);

				});

				reduce_Btn.addEventListener('click', function (){
					var a = '15';
					var b = '5';
					alert(a - b);

				});
			})();
		</script>
	</BODY>

</HTML>